﻿<template>
	<div>
		<div class="store-reviews-total-points">
			<p class="store-reviews-title">总体评分</p>
			<div class="mb10">
				<span class="store-reviews-star"></span>
			</div>
			<div class="store-reviews-explain">
				已有<span class="store-reviews-user-num">111111</span>位用户对门店评分
			</div>
			<p class="store-reviews-final-score">
				<span>4.1</span>分
			</p>
		</div>
		<div class="page-infinite-wrapper">
			<ul v-infinite-scroll="loadMore()" infinite-scroll-disabled="loading" infinite-scroll-distance="10" class="page-infinite-list">
				<li v-for="item in list" track-by="$index" class="page-infinite-listitem">
					<p class="store-reviews-user">{{ item.id }}</p>
					<p>
						<span class="store-reviews-star"></span>
						<span class="store-reviews-grade">4.0</span>
					</p>
					<p class="store-reviews-comment">在这里评论吧，帕萨特上榜的话，另一个兄弟迈腾也是少不了的，两者除了是双保险的，还是竞争对手。</p>
					<p class="store-reviews-time">1分钟前</p>
					<div class="store-reviews-more" v-on:click="give">...</div>
				</li>
			</ul>
			<p class="page-infinite-loading" style="display: none;">
				<div style="height: 28px;">
				</div>
				加载中...
			</p>
		</div>
	</div>


	<mt-popup :visible.sync="popupVisible" popup-transition="popup-fade">
		  <div class="store-reviews-btns">
		  	<div class="store-reviews-btns-report">举报</div>
		  	<div class="store-reviews-btns-cancel">取消</div> 
		  </div>
	</mt-popup> 
</template>

<script>
	import Vue from 'vue';
	//分页
	import {
		InfiniteScroll
	} from 'mint-ui';
	Vue.use(InfiniteScroll);
	import '../../assets/css/infinite-scroll.css';

	//弹窗
	import {Popup} from 'mint-ui';
	Vue.component(Popup.name, Popup);


	//ajax?
	import vueResource from 'vue-resource';
	Vue.use(vueResource);

	export default {
			data() {
				return {
					//分页
					loading: false,
					list: [ ],
					//弹出框
					popupVisible: false
				}
			},
			components: {

			},
			methods: {
				//分页
				loadMore: function() {
					this.loading = true;
					setTimeout(() => {
						let last = this.list[this.list.length - 1];
						for(let i = 1; i <= 10; i++) {
							this.list.push(last + i);
						}
						this.loading = false;
					}, 1000);
				},

				//弹出框	
				give: function() {
					this.popupVisible = !this.popupVisible;
				}
				
			},

		


		//ajax请求
		ready: function () {
			var _this = this;

		        	this.$http.get('./static/json/userJudge.json', {
		        		// headers: {'application/x-www-form-urlencoded': ''}
		        	 })
		            .then(( res ) => {
		                    // success		                    
		                    var data = res.data.obj;
		                    //获得来的数组
		                    console.log(res.data);
		                    data.forEach(function ( val, key ) {
		                    	_this.list.push(val);	
		                    });	
		                    
		                }, () => {
		                    // error
		                });
		 }
	}
</script>
<style lang="scss">
	@import '../../assets/css/common.scss';

	body {
		background: #eee;
	}
	.store-reviews-total-points {
		margin-bottom: rem(10);
		margin-top: rem(10);
		background-color: #fff;
		padding: rem(8) rem(15);
		position: relative;
	}
	.store-reviews-title {
		font-size: rem(14);
		line-height: rem(26);
	}
	.store-reviews-explain {
		font-size: rem(13);
		line-height: rem(18);
	}
	.store-reviews-user-num {
		color: #ff6600;
	}
	.mb10 {
		margin-bottom: rem(4);
	}
	.store-reviews-final-score {
		position: absolute;
		bottom: rem(4);
		right: rem(15);
		color: #ff6600;
		line-height: rem(26);
		font-size: rem(14);	
	}
	.store-reviews-final-score span {
		font-size: rem(36);	
	}
	.page-infinite-listitem {
		text-align: left!important;
		padding: rem(8) rem(15);
		height: auto!important;
		line-height: rem(20)!important;
		position: relative;
		background-color: #fff;
	}
	.store-reviews-time {
		color: #999;
	}
	.store-reviews-more {
		position: absolute;
		top: rem(8);
		right: rem(15);
		font-weight: bold;
	}
	.store-reviews-star {
		display: inline-block;
		width: rem(76);
		height: rem(12);
		background: url(img/icons-score01.png) no-repeat;
		background-size: rem(75) rem(12);
	}
	.store-reviews-grade {
		font-size: rem(12);
	}
	.store-reviews-comment {
		color: #3d4045;
		line-height: rem(16);
	}
	.page-infinite-wrapper {
		overflow: auto!important;
	}
	.mint-popup {
		width: 95%;
		margin: 0 auto;
		background-color: transparent!important;
		margin-bottom: -80%;
		top: 85%!important;
	}
	.store-reviews-btns {
		text-align: center;
		font-size: rem(20);
	}
	.store-reviews-btns-report {
		height: rem(57);
		line-height: rem(57);
		background: rgb(255,255,255);
		color: #ff1700;
		border-radius: rem(12);
		margin-bottom: rem(10);
	}
	.store-reviews-btns-cancel {
		height: rem(57);
		line-height: rem(57);
		color: #0076ff;
		background: #fff;
		border-radius: rem(12);
	}
</style>